import { Button, Card, Space } from "antd"
import React, { FC, memo } from "react"

const ErrorTest: FC = () => {
    function codeError() {
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        const a = undefined
        // @ts-expect-error:a is undefined, but we want to test the runtime behavior.
        if (a.length) {
            console.log("1")
        }
    }

    function asyncError() {
        setTimeout(() => {
            JSON.parse("")
        }, 1)
    }

    function promiseError() {
        new Promise(resolve => {
            const person = {}
            // @ts-expect-error:a is undefined, but we want to test the runtime behavior.
            person.name.age()
            // @ts-expect-error:a is undefined, but we want to test the runtime behavior.
            resolve()
        })
    }

    function xhrErrpr() {
        const xhr1 = new XMLHttpRequest()
        xhr1.open("GET", "https://127.0.0.1:8118/500-error")
        xhr1.send()
    }

    function fetchError() {
        fetch("https://jsonplaceholder.typicode.com/posts/a")
            .then(res => {
                if (res.status == 404) {
                    console.log("fetch请求错误")
                }
            })
            .catch(() => {
                console.log("fetch请求错误")
            })
    }

    function resourceError() {
        // const script = document.createElement("script")
        // script.type = "text/javascript"
        // script.src = "https://abc.com/index.js"
        // document.body.appendChild(script)

        const link = document.createElement("link")
        link.rel = "stylesheet"
        link.href = "https://abc.com/index.css"
        document.body.appendChild(link)
    }

    return (
        <Card>
            <div style={{ display: "flex", justifyContent: "center", alignContent: "center" }}>
                <Space size="middle">
                    <Button color="primary" variant="outlined" onClick={() => codeError()}>
                        js 错误
                    </Button>
                    <Button color="primary" variant="outlined" onClick={() => asyncError()}>
                        异步错误
                    </Button>
                    <Button color="primary" variant="outlined" onClick={() => promiseError()}>
                        promise 错误
                    </Button>
                    <Button color="primary" variant="outlined" onClick={() => xhrErrpr()}>
                        xhr 请求报错
                    </Button>
                    <Button color="primary" variant="outlined" onClick={() => fetchError()}>
                        fetch 请求报错
                    </Button>
                    <Button color="primary" variant="outlined" onClick={() => resourceError()}>
                        加载资源报错
                    </Button>
                </Space>
            </div>
        </Card>
    )
}

export default memo(ErrorTest)
